<template>
  <div class="wrapper">
    <div class="list">
      <div class="txt">上传店面照片:</div>
      <cube-upload
        v-model="fileList"
        :action="action"
        :max="1"
        :simultaneous-uploads="1"
        @file-success="success"
        @file-removed="remove"
        @files-added="filesAdded" />
    </div>
    <div class="line">
      <div class="text">店名:</div>
      <div class="name">
        <cube-input v-model="name" />
      </div>
    </div>
    <div class="line">
      <div class="text">地址:</div>
      <div class="address">
        <cube-input v-model="address" />
      </div>
    </div>
    <div class="btn">
      <cube-button primary @click="save">保存</cube-button>
    </div>
  </div>
</template>

<script>
import config from '@/config/code'
import api from '@/api'
import base64 from '@/util/base64'
export default {
  name: 'av',
  computed: {
    action() {
      return {
        // target: `${process.env.VUE_APP_BASE_API}/api/upload/execute?max-width=750&width=350`,
        // 没有上传width,不会有thumb图
        // max-width, 只要限制本图的宽度
        target: `${process.env.VUE_APP_BASE_API}/api/upload/shop-main?max-width=750`,
        headers: this.headers,
        data: {
        }
      }
    },
    headers() {
      const tokenName = process.env.VUE_APP_TOKEN
      return {
        [tokenName]: this.$store.getters['ExecUser/token']
      }
    }
  },
  data() {
    return {
      fileList: [],
      name: '',
      address: ''
    }
  },
  methods: {
    filesAdded(files) {
      let hasIgnore = false
      // const maxSize = 1 * 1024 * 1024 // 1M
      const maxSize = 1 * 1024 * 1024 * 10 // 10M
      for (const k in files) {
        const file = files[k]
        if (file.size > maxSize) {
          file.ignore = true
          hasIgnore = true
        }
      }
      hasIgnore && this.$createToast({
        type: 'warn',
        time: 1000,
        // txt: 'You selected >1M files'
        txt: '文件超过了10M'
      }).show()
    },
    success(data) {
      const { response } = data
      // console.log(response, config.CODE_SUCCESS)
      if (response.code === config.CODE_SUCCESS) {
        // this.fileList.push({
        //   url: response.data.full_name
        // })
        // set image id
        this.fileList[this.fileList.length - 1].id = response.data.id
        return this.$createToast({
          type: 'correct',
          time: 1500,
          txt: response.message,
          onTimeout: () => {
            // this.$router.push('/service/order/2')
          }
        }).show()
      }
      if (response.code === config.CODE_ERROR) {
        // delete last item
        this.fileList.pop()
        return this.$createToast({
          type: 'error',
          time: 1500,
          txt: response.message
        }).show()
      }
    },
    remove(data) {
      api.Uni.delShopMain().then(() => {
        return this.$createToast({
          type: 'correct',
          time: 1500,
          txt: '删除成功',
          onTimeout: () => {
          }
        }).show()
      })
    },
    init() {
      api.Uni.getShopMain().then(response => {
        let { data } = response
        data = base64.parse(data)
        // console.log(data)
        if (data.merchant_name) {
          this.name = data.merchant_name
        }
        if (data.merchant_address) {
          this.address = data.merchant_address
        }
        if (data.merchant_avatar) {
          // this.avatar = data.avatar
          this.fileList.push({
            url: data.merchant_avatar,
            id: data.id
          })
        }
      })
    },
    save() {
      if (this.fileList.length === 0) {
        return this.$createToast({
          type: 'error',
          time: 1500,
          txt: '请上传店面',
        }).show()
      }
      if (!this.name || this.name.length === 0) {
        return this.$createToast({
          type: 'error',
          time: 1500,
          txt: '请填写店名',
        }).show()
      }
      if (!this.address || this.address.length === 0) {
        return this.$createToast({
          type: 'error',
          time: 1500,
          txt: '请填写地址',
        }).show()
      }
      api.Uni.saveShopMain({
        merchant_name: this.name,
        merchant_address: this.address
      }).then(() => {
        return this.$createToast({
          type: 'correct',
          time: 500,
          txt: '操作成功',
          onTimeout: () => {
          }
        }).show()
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped lang="stylus">
.wrapper
  padding 20px
  background white
  text-align left
  .txt
    //font-weight 700
    height 30px
    line-height 30px
  .line
    .text
      height 30px
      line-height 30px
    .name, .address
      margin-bottom 10px
</style>
